<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="../../static/js/axios-0.18.0.js"></script>
    <script src="../../static/plugins/echarts/echarts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--引入样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <link rel="stylesheet" href="../../static/css/style.css" type="text/css">

    <style type="text/css" abt="234"></style>
    <script>//remove baidu search ad
    var _countAA = 0

    function doBBBd() {
    }

    doBBBd()
    document.addEventListener('keyup', function () {
        _countAA -= 10;
        doBBBd()
    }, false)
    document.addEventListener('click', function () {
        _countAA -= 10;
        doBBBd()
    }, false)

    </script>
    <script src="../../static/js/ribbon.js"></script>
</head>

<body>
<div id="app">
    <div class="content">
        <el-form ref="loginform" :model="loginform" :rules="rules" label-position="right" label-width="100px">
            <el-row>
                <div class="title" style="padding-top: 20px">
                    <p>管理员登录</p>
                </div>
            </el-row>
            <el-row>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginform.username"/>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="loginform.password"/>
                </el-form-item>
            </el-row>
            <el-row>
                <el-col :span="18">
                    <el-form-item label="验证码" prop="code">
                        <el-input v-model="loginform.code"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <img src="/user/images" title="看不清，请点击图片刷新" width="128px"
                         height="33px" id="image1" @click="getcode(this)"/>
                </el-col>
            </el-row>
            <el-row style="padding-left: 250px">
                <el-button style="width:150px;" type="primary" plain @click="loginIn()" v-loading.fullscreen.lock="fullscreenLoading">登陆</el-button>
            </el-row>
        </el-form>

    </div>
</div>


<script type="text/javascript" src="../../static/js/ribbon.js"></script>
<canvas id="bgCanvas" width="1432" height="937"
        style="display: block; position: fixed; margin: 0px; padding: 0px; border: 0px; outline: 0px; left: 0px; top: 0px; width: 100%; height: 100%; z-index: -1; background-color: rgba(223, 223, 223, 0.3);"></canvas>
<!-- 引入组件库 -->
<script type="text/javascript" src="../../static/js/index.js"></script>
<script type="text/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            loginform:{},
            rules:{
                username:[{required:true,message:'用户名为必填',trigger:'blur'},
                    {min:3,max:16,message:"长度在3到16之间",trigger:'blur'}],
                password:[{required:true,message:'密码为必填',trigger:'blur'},
                    {min:8,max:16,message:"长度在8到16之间",trigger:'blur'}],
                code: [{ required: true, message: '验证码为必填项', trigger: 'blur' },
                    {min:5,max:5,message:"长度为5",trigger:'blur'}]
            },
            fullscreenLoading:false
        },
        methods:{
            //登陆
            loginIn(){
                //表单校验
                this.$refs['loginform'].validate((valid)=>{
                    if(valid){
                        axios.post("/admin/login",this.loginform).then((res)=>{
                            if(res.data.flag){
                                //登陆成功，跳转页面
                                this.$message.success(res.data.message);
                                //跳转页面
                                this.fullscreenLoading = true;
                                setTimeout(() => {
                                    this.fullscreenLoading = false;
                                    location.href="/admin/index";
                                }, 1500);

                            }else{
                                //登陆失败，提示用户名或者密码错误或者验证码错误
                                this.$message.error(res.data.message);
                            }
                        }).catch(()=>{
                            this.$message.error("请求出错");
                        })
                    }else{
                        this.$message.error("表单验证失败，请重新填写");
                    }
                })
            },
            //获取图片验证码
            getcode(){
                var b = Math.random();
                document.getElementById("image1").src = "/user/images?d\x3d" + b
            }
        }
    });
</script>


</body>
</html>